<template>
  <el-dialog title="高级查询" v-model="dialogFormVisible" width="50%" draggable append-to-body>
    <el-empty description="没有任何查询条件" v-if="this.form.domains.length == 0">
      <el-button link @click="addDomain">点击新增</el-button>
    </el-empty>
    <el-form :model="form" size="mini">
      <!-- 选择字段 -->
      <el-form-item v-for="domain in form.domains" :key="domain.key">
        <el-row type="flex" :gutter="16">
          <el-col :md="8" :xs="24">
            <el-select clearable v-model="domain.column" placeholder="请选择查询字段"
              @change="changeOption($event, domain.key)">
              <el-option v-for="item in selectlist" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :md="4" :xs="24">
            <el-select v-model="domain.type" clearable placeholder="请选择">
              <el-option v-for="item in seachflag" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :md="8" :xs="24">
            <div v-if="
              domain.serachType == 'input' || domain.serachType == '' || domain.serachType == null
            ">
              <el-input clearable v-model="domain.value" autocomplete="off" placeholder="请输入内容"></el-input>
            </div>
            <div v-else-if="domain.serachType == 'time'">
              <el-time-select clearable v-model="domain.value" :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
              }" placeholder="选择时间">
              </el-time-select>
            </div>
            <div v-else-if="domain.serachType == 'date'">
              <el-date-picker clearable v-model="domain.value" value-format="YYYY-MM-DD" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
            <div v-else-if="domain.serachType == 'select'">
              <el-select v-model="domain.value" placeholder="请选择" clearable>
                <el-option v-for="item in domain.dictOption" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :md="4" :xs="0">
            <el-button icon="el-icon-plus" circle @click="addDomain"></el-button>
            <el-button icon="el-icon-minus" circle @click="redDomain(domain.key)"> </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false" size="mini">关闭</el-button>
      <el-button @click="clearSearch" size="mini">重置</el-button>
      <el-button type="primary" @click="doSearch" size="mini">查询</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDictItems } from '@/api/sys/dict'
import { archiveDrownDown, boxDrownDown } from '@/api/sys/field'
export default {
  name: 'TableHeader',
  props: {
    conditionItems: {
      type: Array,
    },
    item: {
      default: null,
    },
  },
  data() {
    return {
      dialogFormVisible: false,

      form: {
        domains: [
          {
            column: '',
            type: 'like',
            value: '',
            serachType: 'input',
            dictCode: null,
            dictOption: [],
            key: Date.now(),
          },
        ],
      },
      serachType: 'input',
      seachflag: [
        { value: 'like', label: '包含' },
        { value: 'notlike', label: '不包含' },
        { value: 'eq', label: '等于' },
        { value: 'ne', label: '不等于' },
        { value: 'rightlike', label: '以...开始' },
        { value: 'leftlike', label: '以...结尾' },
        { value: 'gt', label: '大于' },
        { value: 'ge', label: '大于等于' },
        { value: 'lt', label: '小于' },
        { value: 'le', label: '小于等于' },
      ],
      selectlist: [],
      showSearchContent: this.conditionItems,
    }
  },
  computed: {
    // 数组的前五个值
    TheFirstFiveValuesOfAnArray() {
      return this.showSearchContent.slice(0, 5)
    },
    // 剩下的数组
    TheRestOfTheArray() {
      return this.showSearchContent.slice(5)
    },
  },
  created() {
    // this.seachflag = this.seachflag[0].value
  },
  mounted() { },
  methods: {
    // 高级查询 打开弹窗
    advancedQuery(type) {
      if (type === 'box') {
        boxDrownDown()
          .then((res) => {
            if (res.data.code === 200) {
              this.selectlist = res.data.data
              this.dialogFormVisible = true
            } else {
              this.$message.warning(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      } else if (type === 'archive') {
        archiveDrownDown()
          .then((res) => {
            if (res.data.code === 200) {
              this.selectlist = res.data.data
              this.dialogFormVisible = true
            } else {
              this.$message.warning(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      }
    },
    // 选择字段，来获取当前选择字段的类型
    changeOption(option, key) {
      // 获取当前选中的值
      const matchedItem = this.selectlist.find((item) => item.value == option)
      // 获取当前选中的值的类型
      let serachType = matchedItem ? matchedItem.type : 'input'
      // 获取选中值的字典编码
      let dictCode = matchedItem ? matchedItem.value : null
      // 根据类型获取数据
      this.getTypeByValue(serachType, dictCode, key)
    },
    // 处理数据 将选择的类型赋值给对应的key的serachType
    getTypeByValue(type, dictCode, key) {
      for (let item of this.form.domains) {
        // 遍历this.form.domains，查找key属性等于参数key的item
        if (item.key === key) {
          // 将item的serachType属性设置为参数type
          item.serachType = type
          item.dictCode = dictCode
          if (type === 'select' && dictCode !== null) {
            // 如果type为select，则根据dictCode获取字典选项
            getDictItems(dictCode).then((res) => {
              if (res.data.code === 200) {
                item.dictOption = res.data.data
              } else {
                item.dictOption = []
              }
            })
          } else {
            item.dictOption = []
          }
        }
      }
      return null // 如果没有找到匹配项，则返回 null 或者其他适当的值
    },
    // 增加新的查询条件
    addDomain() {
      this.form.domains.push({
        column: '',
        type: 'eq',
        value: '',
        serachType: 'input',
        key: Date.now(),
      })
    },
    // 减去新的查询条件
    redDomain(key) {
      this.form.domains = this.form.domains.filter((x) => x.key !== key)
    },
    doSearch() {
      const searchContent = this.form.domains.filter((x) => x.column)
      this.$emit('doSearch', JSON.stringify(searchContent))
      this.dialogFormVisible = false
    },
    // 清空搜索框内的数据
    clearSearch() {
      this.form.domains = this.form.domains.map((x) => {
        return {
          ...x,
          value: '',
          type: 'like',
          column: '',
        }
      })
    },

    // 取整方法  计算layout布局的span参数
    Mathfloor(divisor) {
      if (divisor <= 5) {
        return Math.floor(24 / divisor)
      } else {
        return Math.floor(24 / 5)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.search-content-wrapper {
  padding: 10px;
}

.el-form-item__content .el-input-group {
  vertical-align: middle;
}

.el-form-item__content {
  display: flex !important;
}

.el-empty {
  padding: 0;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

@media screen and (min-width: 600px) and (max-width: 1920px) {
  .el-dialog {
    width: 50% !important;
  }
}

@media screen and (min-width: 1920px) and (max-width: 3840px) {
  .el-dialog {
    width: 40% !important;
  }
}
</style>
